<template>
	<div>
		<el-button type="primary" @click="dialogFormVisible = true">新增商品</el-button>
		<!-- <el-button type="primary">主要按钮</el-button> -->
		<el-dialog title="新增商品" :visible.sync="dialogFormVisible" center>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="品牌" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="大类" prop="type">
					<el-input v-model="ruleForm.type"></el-input>
				</el-form-item>
				<el-form-item label="小类" prop="classes">
					<el-input v-model="ruleForm.classes"></el-input>
				</el-form-item>
				<el-form-item label="材质,制作" prop="materials">
					<el-input v-model="ruleForm.materials"></el-input>
				</el-form-item>
				<el-form-item label="适用规格" prop="scope">
					<el-input v-model="ruleForm.scope"></el-input>
				</el-form-item>
				<el-form-item label="专属规格" prop="exScope">
					<el-input v-model="ruleForm.exScope"></el-input>
				</el-form-item>
				<el-form-item label="包装规格" prop="packScope">
					<el-input v-model="ruleForm.packScope"></el-input>
				</el-form-item>
				<el-form-item label="口味" prop="taste">
					<el-input v-model="ruleForm.taste"></el-input>
				</el-form-item>
				<el-form-item label="特殊功用" prop="specialPublic">
					<el-input v-model="ruleForm.specialPublic"></el-input>
				</el-form-item>
				<el-form-item label="产地" prop="placeOrigin">
					<el-input v-model="ruleForm.placeOrigin"></el-input>
				</el-form-item>
				<el-form-item label="生产日期" prop="dateProduced">
					<el-input v-model="ruleForm.dateProduced"></el-input>
				</el-form-item>
				<el-form-item label="保质期" prop="exDate">
					<el-input v-model="ruleForm.exDate"></el-input>
				</el-form-item>
				<el-form-item label="特色说明" prop="explain">
					<el-input v-model="ruleForm.explain"></el-input>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input v-model="ruleForm.price"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio v-model="ruleForm.status" :label="0">下架</el-radio>
					<el-radio v-model="ruleForm.status" :label="1">在售</el-radio>
				</el-form-item>
			</el-form>
			
			<el-upload class="upload-demo" action="api/goods/upload" :on-success="handleSuccess" :on-remove="handleRemove"
			 list-type="picture">
				<el-button size="small" type="primary">上传大图</el-button>
			</el-upload>
			
			<el-upload class="upload-demo" action="api/goods/upload" :on-success="smaImgSuccess" :on-remove="smaImgRemove"
			 list-type="picture">
				<el-button size="small" type="primary">上传小图</el-button>
			</el-upload>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm('ruleForm')">立即新增</el-button>
				<el-button @click="handelCancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	let _ = require('lodash')
	import {
		addGoods
	} from "@/service/goods.js"
		import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				dialogFormVisible: false,
				ruleForm: {
					name: '1',
					type: '1',
					classes: '1',
					materials: '1',
					scope: '1',
					exScope: '1',
					packScope: '1',
					taste: '1',
					specialPublic: "1",
					placeOrigin: "1",
					dateProduced: "1",
					exDate: "1",
					explain: "1",
					price: "1",
					imgs: {"bigImg":[],"smaImg":[]},
					status: "",
					// supplierId: "1"
				},
				rules: {
					name: [{
						required: true,
						message: '请输入商品品牌名或推广标题',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请输商品类别(主粮、洗浴、日用品等)',
						trigger: 'blur'
					}],
					classes: [{
						required: true,
						message: '请输入小类别(狗粮、猫粮等)',
						trigger: 'blur'
					}],
					materials: [{
						required: true,
						message: '请输入材质',
						trigger: 'blur'
					}],
					scope: [{
						required: true,
						message: '请输入适用规格',
						trigger: 'blur'
					}],
					exScope: [{
						required: true,
						message: '请输入专属规格',
						trigger: 'blur'
					}],
					packScope: [{
						required: true,
						message: '请输入包装规格',
						trigger: 'blur'
					}],
					taste: [{
						required: true,
						message: '请输入口味',
						trigger: 'blur'
					}],
					specialPublic: [{
						required: true,
						message: '请输入特殊功用',
						trigger: 'blur'
					}],
					placeOrigin: [{
						required: true,
						message: '请输入产地',
						trigger: 'blur'
					}],
					dateProduced: [{
						required: true,
						message: '请输入生产日期',
						trigger: 'blur'
					}],
					exDate: [{
						required: true,
						message: '请输入保质期',
						trigger: 'blur'
					}],
					explain: [{
						required: true,
						message: '请输入产品特色',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '请选择状态',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			...mapActions("goods",["show"]),
			handleRemove(file, fileList) { //文件列表移除文件时的钩子
				_.pull(this.ruleForm.imgs.bigImg, file.response.url)
			},
			handleSuccess(response, file, fileList) { //上传成功时
				this.ruleForm.imgs.bigImg.push(response.url)
			},
			
			smaImgRemove(file, fileList) { //文件列表移除文件时的钩子
				_.pull(this.ruleForm.imgs.smaImg, file.response.url)
			},
			smaImgSuccess(response, file, fileList) { //上传成功时
				this.ruleForm.imgs.smaImg.push(response.url)
			},
			submitForm(ruleForm) {
				this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						// const  supplierId = "123123" //门店管理员ID
						this.dialogFormVisible = false
						addGoods(this.ruleForm)
						this.show()
					} else {
						return false;
					}
				});
			},
			handelCancel() {
				this.dialogFormVisible = false
				this.ruleForm.imgs = [];
			}
		}

	}
</script>

<style>
</style>
